<script setup lang="ts">

</script>

<template>
    <div class="container">
        <div class="header">
            智 慧 用 电 后 台 管 理 系 统
        </div>
        <div class="main">
            <div class="routerNav">
                <nav>
                    <!-- <RouterLink to="/" class="router">
                        <img src="../assets/images/user.png" alt="">用户管理
                    </RouterLink>
                    <RouterLink to="/Area" class="router">
                        <img src="../assets/images/Area.png" alt="">区域管理
                    </RouterLink> -->
                    <RouterLink to="/" class="router">
                        <img src="../assets//images/device.png" alt=""> 设备管理
                    </RouterLink>
                    <RouterLink to="/Topology" class="router">
                        <img src="../assets/images/topology.png" alt="">拓扑管理
                    </RouterLink>
                </nav>
            </div>
            <div class="routerSpot">
                <RouterView />
            </div>
        </div>
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    height: 100vh;
    background-color: var(--base-color);
}

.header {
    width: 100%;
    height: 135px;
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    line-height: 80px;
    background-image: url(../assets/images/header.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.main {
    display: flex;
    margin-top: -60px;
}

.routerNav {
    flex: 15;
    height: 880px;
    border-right: 1px solid #687cb8;
    background-color: #1c3062;
}

nav {
    width: 100%;
    font-size: 18px;
}

.router {
    display: block;
    height: 60px;
    padding-left: 20px;
    text-decoration: none;
    line-height: 60px;
    color: var(--text-color)
}

.router img {
    width: 24px;
    vertical-align: text-bottom;
    margin-right: 10px;
}

.router:hover {
    background-color: #15264d;
}

nav a.router-link-exact-active {
    background-color: #15264d;
}

.routerSpot {
    flex: 85;
}
</style>